<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <div class="one">
            <el-form-item label="顾客姓名:">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="火炉选择:">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="日期:">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
            <el-form-item label="备注:">
              <span>{{ props.row.category}}</span>
            </el-form-item>
          </div>
          <div class="two">
            <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
          </div>
          <div class="nex_box">
            <el-button-group>
              <el-button icon="el-icon-minus" @click="decrease"></el-button>
              <el-button icon="el-icon-plus" @click="increase"></el-button>
            </el-button-group>
          </div>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="顾客姓名" prop="id"></el-table-column>
    <el-table-column label="火炉选择" prop="name"></el-table-column>
    <el-table-column label="日期" prop="desc"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      percentage: 10,
      colors: [
        { color: "#6f7ad3", percentage: 20 },
        { color: "#1989fa", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#e6a23c", percentage: 80 },
        { color: "#f56c6c", percentage: 100 }
      ],
      tableData: [
        {
          id: "张三",
          name: "火炉001",
          category: "无",
          desc: "2008/2/10"
        },
        {
          id: "里斯尔",
          name: "火炉001",
          category: "无",
          desc: "2008/2/10"
        },
        {
          id: "薇薇安",
          name: "火炉003",
          category: "火葬一条龙",
          desc: "2008/2/10"
        },
        {
          id: "唐宇",
          name: "火炉001",
          category: "火化自取",
          desc: "2008/2/13"
        }
      ]
    };
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-form{
  width: 100%;
  height: 15%;
  /* background-color: red; */
  display: flex;
}
.one{
  color:lightblue;
  /* text-align: left; */
  font-weight: bold;
  width: 30%;
  margin-left: 3.6vw;
}
.two{
  text-align: center;
}
.nex_box{
  /* background-color: lightskyblue; */
  text-align: end;
  width: 33%;
}
</style>
